import React from 'react'
import { NavBar, Space, Toast } from 'antd-mobile'
import { useLoaderData, useNavigate, useSearchParams } from 'react-router-dom'
import Mydate from './conpoment/Mydate'
import Cartp from './conpoment/Cartp'
import { getCartListApi } from '../../api/cart'
function Index() {
  let nav=useNavigate()
  const [sp]=useSearchParams()
  const start=sp.get('start')
  const end=sp.get('end')
  const date=sp.get('date')
  const {list}=useLoaderData()
  return (
    <div>
       <NavBar style={{background:'aqua'}} onBack={()=>nav(-1)}>{start}→{end}</NavBar>
      <Mydate date={date}></Mydate>
      {
        list.map((item)=>{
          return <Cartp key={item.id} {...item}></Cartp>
        }
        )
      }
      
    </div>
  )
}

export default Index
export const loader=async({request})=>{
  const url=new URL(request.url)
  const data=Object.fromEntries(url.searchParams)
  console.log(data);
  const {data:res}=await getCartListApi(data)
  console.log(res);
  
  return {list:res}
}
